<template lang="html">
  <div class="">
    <div class="t_header">
      <el-form :inline="true" :model="formInline" label-width="140px" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.name" placeholder="供应商/申请方姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.select" placeholder="订单状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="未发货" value="0"></el-option>
            <el-option label="已发货" value="1"></el-option>
            <!-- <el-option label="已完成" value="2"></el-option>
            <el-option label="已关闭" value="3"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el_button" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="sm_name" label="供应商名称" width="">
            <template slot-scope="scope">
                <el-popover placement="right" trigger="hover" @show="getUserInfo(scope.row)">
                  <p><img class="user_avatar" :src="userInfo.head_pic" alt=""></p>
                  <p>姓名：{{userInfo.name}}</p>
                  <p>手机号：{{userInfo.phone}}</p>
                  <el-button slot="reference" size="mini" type="primary" plain>{{scope.row.sm_name}}</el-button>
                </el-popover>
            </template>
				</el-table-column>
        <el-table-column prop="company" label="申请方" width=""></el-table-column>
        <el-table-column prop="create_time" label="申请时间" width=""></el-table-column>
        <el-table-column prop="type_name" label="服务项类型" width=""></el-table-column>
        <el-table-column prop="goods_brand" label="产品品牌" width=""></el-table-column>
        <el-table-column prop="number" label="申请数量" width=""></el-table-column>
        <el-table-column prop="status" label="状态" width="">
            <template slot-scope="scope">
                  <p v-if="scope.row.status == 0">未发货</p>
                  <p v-if="scope.row.status == 1">已发货</p>
                  <p v-if="scope.row.status == 2">已收货</p>
                  <!-- <p v-if="scope.row.status == 0">未发货</p> -->
            </template>
        </el-table-column>
        <el-table-column prop="" label="产品详情" width="">
						<template slot-scope="scope">
	              <el-popover placement="bottom"width="1000" @show="onShow(scope.row)" trigger="click">
	                <el-table :data="[proDetail]">
	                  <el-table-column property="goods_brand" label="产品品牌"></el-table-column>
	                  <el-table-column property="goods_standard" label="产品型号"></el-table-column>
	                  <el-table-column property="price" label="结算价"></el-table-column>
	                  <el-table-column property="detail" label="产品详情"></el-table-column>
	                  <el-table-column width="150" label="质量保证书(图片)">
                      <template slot-scope="scope">
                         <div class="el-table_img">
                            <img preview="0" class="preview-img" :src="scope.row.quality_certificate" alt="">
                         </div>
                     </template>
                    </el-table-column>
	                  <el-table-column width="150" label="质检报告（图片）">
                        <template slot-scope="scope">
                           <div class="el-table_img">
                              <img preview="0" class="preview-img" :src="scope.row.quality_undertaking" alt="">
                           </div>
                       </template>
                    </el-table-column>
	                  <el-table-column width="150" label="质量承保书（图片）">
                          <template slot-scope="scope">
                             <div class="el-table_img">
                                <img preview="0" class="preview-img" :src="scope.row.quality_inspection_report" alt="">
                             </div>
                         </template>
                    </el-table-column>
	                </el-table>
	                <el-button slot="reference" size="mini" type="primary" class="name-wrapper" plain>查看详情</el-button>
	              </el-popover>
	          </template>
				</el-table-column>
        <el-table-column prop="" label="操作" width="">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="mini">提醒发货</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :page-count='tableData.rows'  :current-page="currentPage" @current-change="changePage" align="center"></el-pagination>
    </div>




  </div>
</template>

<script>
export default {
  data(){
    return {
      formInline:{},
      tableData:{},
      userInfo:[],
      proDetail:{},
      currentPage:1
    }
  },
  created(){
    this.getFreeDeliverList()
    this.$previewRefresh();
  },
  methods:{
    getFreeDeliverList(page = 1){
      this.currentPage = page;
      this.$http2.getFreeDeliverList({
        page: page,
        name: this.formInline.name,
        status: this.formInline.select
      }).then(res=>{
        res.data.code==1 ?
        this.tableData = res.data.data : []
      })
    },
    getUserInfo(e){
      this.$http2.getSmUserInfo({
        sm_id:e.id
      }).then(res=>{
        this.userInfo = res.data.data
      })
    },
    onShow(e){
      this.$http2.getFreeDelicerDetail({
        id: e.id
      }).then(res=>{
        this.proDetail = res.data.data
      })
    },
    handleClick(e){
      this.$confirm("提醒发货").then(_ =>{
        this.$http2.remindDeliver({
          sm_id: e.sm_id
        }).then(res=>{
          if(res.data.code == 1){
            this.$message.success(res.data.msg)
          }else{
            this.$message.error(res.data.msg)
          }
        })
      }).catch();
    },
    changePage(e){
        this.getFreeDeliverList(e)
    },
    onSubmit(){
      this.getFreeDeliverList()
    },
  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";
.user_avatar{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: block;
}
.el-table_img{
  width: 150px;
}
.pro_detail{
  z-index: 1
}
.el-table_img img{
  display: block;
  width: 100%
}
</style>
